<template>
  <div class="big">
    <!--头部-->
    <div class="top">
      <div class="title">基于Flask框架写的商城</div>
    </div>
    <!--导航栏-->
    <div>
      <el-menu :default-active="this.$route.path" mode="horizontal" active-text-color="orange" background-color="#D7D7D7" class="menu" text-color="#000000" router>
        <el-menu-item index="/reception_page">首页</el-menu-item>
        <el-menu-item index="2">商品信息</el-menu-item>
        <el-menu-item index="3">客服</el-menu-item>
        <el-menu-item index="4">新闻公告</el-menu-item>
        <el-menu-item index="5">留言板</el-menu-item>
        <el-menu-item index="6">购物车</el-menu-item>
        <el-menu-item index="7">后台管理</el-menu-item>
        <el-menu-item index="8">个人中心</el-menu-item>
      </el-menu>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
}
</script>

<style scoped>
.big{
  background-color: #F7F8FA;
  height: 100%;
  width: 100%;
}
.top{
  display: flex;
  justify-content: space-between;
  color: #FF8E01;
  padding: 20px 20px;
  background-color: #F7F8FA;
  border-bottom: 1px solid #000000;
}
.title{
  font-weight: bold;
  font-size: 30px;
}
.menu{
  border-top: 3px solid #FF8E01;
  display: flex;
  justify-content: space-between;
}






</style>
